<template name="shareview">
	<view>
		<view class="cu-modal" :class="modalName=='posterModal'?'show':''">
			<view class="cu-dialog w80">
				<view class="text-white flex-end margin-bottom">
					点击右上角进行分享
					<image :src="CLOUDPATH+'/gsc/sharejt.png'" mode="aspectFit" class="sharejiao"></image>
				</view>
				<view class="bg-red" v-if="loading" id="_poster" ref="poster">
					<view class="bg-red main relative overflow">
						<image :src="BASEPATH+'/backend/resources/img/poster.png'" mode="widthFix"></image>
						<view class="absolute minfo">
							<view class="thumb">
								<image :src="value.cover2" mode="widthFix"></image>
							</view>
							<view class="text-lg text-bold  margin-top-sm text-left text-black title">{{value.title}}</view>
							<image :src="qr_code" mode="aspectFill" class="qrcode"></image>
							<view class="margin-top-sm text-gray">长按识别二维码进行抢购</view>
						</view>
					</view>
				</view>
				<image v-else class="main-img" :src="previewFile" mode="aspectFill" :style="'height:' + mainHeight+'px'"></image>

				<view class="cu-btn cuIcon-roundclose text-white lg margin-top" @tap="modalName=''"></view>

				<view class="text-white">长按保存图片进行分享</view>
			</view>
		</view>

		<view class="cu-modal drawer-modal" :class="modalName=='wechatModal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog w100">
				<view class="text-white text-xxl margin-top-xxl padding-top-xl">
					<view class="margin-top">
						<text class="cuIcon cuIcon-creative text-xxl "></text>
					</view>
					<view class="margin-top">
						<text>点击右上角分享给好友</text>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='typeModal'?'show':''">
			<view class="cu-dialog">
				<view class="bg-white cu-list col-2 grid no-border">
					<view class="cu-item" @click="createPoster">
						<view class="cuIcon cuIcon-album text-orange"></view>
						<view>海报</view>
					</view>
					<!-- <view class="cu-item">
						<view class="cuIcon cuIcon-form text-blue"></view>
						<view>文案</view>
					</view> -->
					<view class="cu-item" @click="wechatShare">
						<view class="cuIcon cuIcon-weixin text-green"></view>
						<view>微信</view>
					</view>
				</view>
				<view class="bg-white margin-top text-red padding-tb" @tap="modalName=''">
					取消
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// #ifdef H5
	import html2canvas from '../../common/unit/html2canvas.min.js'
	// #endif
	import QR from '../../common/unit/wxqrcode.js'
	export default {
		name: "shareview",
		// #ifdef H5
		components: {
			html2canvas
		},
		// #endif
		props: {
			// value: {
			// 	type: Object,
			// 	default: null
			// }
		},
		created: function(e) {},
		data() {
			return {
				modalName: '',
				id: 0,
				detail: null,
				member: null,
				qr_code: null,
				mainHeight: 100,
				loading: true,
				value: {},
				CLOUDPATH: this.$config.cloudPath,
				BASEPATH: this.$http.host(),
			}
		},
		methods: {
			showModal(value, member) {
				this.value = value
				console.log(value)
				this.member = member
				// this.modalName = 'typeModal'
				this.loading = true
				this.createPoster()
			},
			wechatShare() {
				this.modalName = 'wechatModal'
			},
			getPoster() {

				// #ifdef H5
				let info = uni.createSelectorQuery().select("#_poster");
				info.boundingClientRect((data) => { //data - 各种参数
					console.log(data.width) // 获取元素宽度
					this.mainHeight = data.height
					this.$nextTick(function() {
						html2canvas(document.querySelector('#_poster')).then(canvas => {
							let previewFile = canvas.toDataURL('image/png')
							this.previewFile = previewFile
							this.loading = false
							uni.hideLoading()
						});
					})
				}).exec()
				// #endif
			},
			createPoster() {
				this.modalName = 'posterModal'
				uni.showLoading({
					title: '海报生成中...'
				})
				let share_url = this.value.share_url
				this.qr_code = QR.createQrCodeImg(share_url, {
					errorCorrectLevel: 'L',
					size: parseInt(300) //二维码大小  
				})
				setTimeout((res) => {
					this.getPoster()
				}, 1000)
			},
		},
	}
</script>

<style>
	.main {
		overflow: hidden;
		border-radius: 0 0 20rpx 20rpx;
	}

	.member {}

	.member .thumb {
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
	}

	.member .thumb image {
		width: 100%;
		height: 100%;
	}

	.line-orange {
		border: 1px solid #ffa530;
		border-radius: 8rpx;
	}

	.goodsimage {}

	.goodsimage image {
		width: 100%;
	}

	.goodsname {
		background-color: #F2F2F2;
		padding: 10rpx;
	}

	.goodsprice {
		font-size: 40rpx;
	}

	.qrcode {
		width: 200rpx;
		height: 200rpx;
		margin-top: 100rpx;
	}

	.tips {
		width: 100%;
		margin-right: 60rpx;
	}

	.logo {
		padding: 10rpx;
	}

	.main-img {
		width: 100%;
	}

	.cu-dialog {
		border-radius: 0;
		background: none;
	}

	.w80 {
		width: 80%;
	}

	.cu-btn.lg {
		background: none;
		font-size: 60upx;
	}

	.member {}

	.member .thumb {
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
	}

	.member .thumb image {
		width: 100%;
		height: 100%;
	}

	.line-orange {
		border: 1px solid #ffa530;
		border-radius: 8rpx;
	}

	.goodsimage {}

	.goodsimage image {
		width: 100%;
	}

	.goodsname {
		background-color: #F2F2F2;
		padding: 10rpx;
	}

	.goodsprice {
		font-size: 40rpx;
	}

	.tips {
		width: 100%;
		margin-right: 60rpx;
	}

	.sharejiao {
		width: 100rpx;
		height: 100rpx;
	}

	.flex-end {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.minfo {
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		padding: 60rpx;
	}

	.minfo .thumb {
		margin-top: 30rpx;
		height: 300rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.title {
		height: 100rpx;
		line-height: 50rpx;
	}
</style>
